<template>
    <div class="order">
        <VHeader title="我要点单" />
        <div class="flex flex-space-around title">
            <div v-for="item in $route.query.selectedName" :key="item" v-text="item" />
        </div>
        <div class="untitle">请选择点单类别</div>
        <div class="flex flex-center flex-align-center circle-panel">
            <div v-for="item in list" :key="item.class_name" :class="'absolute '+ item.class_name" @click="select(item.id, item.name)">
                <img :src="item.img" />
                <p>{{item.name}}<br />服务圈</p>
            </div>
            <div class="center"></div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                list: [
                    {id:1, class_name: 'dy', img: require('../../../static/img/order/dy@2x.png'), name: '党员志愿'},
                    {id:2, class_name: 'wt', img: require('../../../static/img/order/wt@2x.png'), name: '文体志愿'},
                    {id:3, class_name: 'bm', img: require('../../../static/img/order/bm@2x.png'), name: '便民志愿'},
                    {id:4, class_name: 'ws', img: require('../../../static/img/order/ws@2x.png'), name: '卫生志愿'},
                    {id:5, class_name: 'kj', img: require('../../../static/img/order/kj@2x.png'), name: '科技志愿'},
                    {id:6, class_name: 'fl', img: require('../../../static/img/order/法律@2x.png'), name: '法律志愿'},
                ],
                selectedCode: [],
                selectedName: [],
                selectedIndex: 0,
            }
        },
        methods: {
            select(categoryId, name){
                this.$route.query.selectedName.push(name+'服务圈');
                this.$router.push({name: 'myOrderList', query: {...this.$route.query, categoryId}})
            },
            async getList(code = 0){
                let list = await this.$http({
                    method:'api.diandan.getCategory',
                    code,
                })
                this.list = list.data.list
            },
        },
        async mounted() {
            // await this.getList();
        }
    }
</script>
<style lang="scss" scoped>
    .title {
        padding: 0.3rem 0;
        font-size: 150%;
        color: #F65D5D;
    }
    .untitle {
        font-size: 120%;
        padding: 0.3rem;
    }
    .circle-panel {
        height: 450px;
        position: relative;
        .absolute {
            position:absolute;
            width: 60px;
            height: 60px;
            padding: 15px;
            border-radius: 50%;
            color: white;
            img {
                display: block;
                margin-left: 18px;
                width: 25px;
            }
            p {
                text-align: center;
                margin-top: 5px;
                font-size: 110%;
                line-height: 120%;
            }
        }
        .dy {
            top: 30px;
            left: 50%;
            margin-left: -45px;
            background-color: #D43643;
        }
        .wt {
            top: 120px;
            left: 70%;
            background-color: #B84F83;
        }
        .bm {
            top: 260px;
            left: 70%;
            background-color: #F3A841;
        }
        .ws {
            top: 330px;
            left: 50%;
            margin-left: -45px;
            background-color: #80AB49;
        }
        .kj {
            top: 260px;
            left: 10%;
            background-color: #4D8FE8;
        }
        .fl {
            top: 120px;
            left: 10%;
            background-color: #E56762;
        }
    }
    .center {
        width: 120px;
        height: 120px;
        text-align: center;
        border-radius: 50%;
        background:url('../../../static/img/order/fw@2x.png') center center no-repeat #C9C9C9;
        background-size: 39pt 34pt;
    }
</style>